<script lang="ts" setup>
import { inject, ref } from 'vue'
import TreeSelect from './TreeSelect.vue'
const globalGridAttr: any = inject('globalGridAttr')

const glNode = ref([ // 关联节点
  {
    value: '1',
    label: '节点名称1'
  },
  {
    value: '2',
    label: '节点名称2'
  },
  {
    value: '3',
    label: '节点名称3'
  },
  {
    value: '4',
    label: '节点名称4'
  }
])
const ruleList = ref([ // 排序规则
  {
    value: '1',
    label: '人工排序'
  },
  {
    value: '2',
    label: '人员优先级排序（从低到高）'
  },
  {
    value: '3',
    label: '人员优先级排序（从高到低）'
  }
])
const columns = ref([
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: 80
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address 1',
    ellipsis: true
  },
  {
    title: 'Long Column Long Column Long Column',
    dataIndex: 'address',
    key: 'address 2',
    ellipsis: true
  },
  {
    title: 'Long Column Long Column',
    dataIndex: 'address',
    key: 'address 3',
    ellipsis: true
  },
  {
    title: 'Long Column',
    dataIndex: 'address',
    key: 'address 4',
    ellipsis: true
  }
])

const data = ref([
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
    tags: ['nice', 'developer']
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
    tags: ['loser']
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher']
  }
])
const emit = defineEmits(['change'])
const handleChange = (e: any, type: string, tag: string) => {
  const val = tag === 'input' ? e.target.value : e
  globalGridAttr[type] = val
  if (type == 'user') {
    globalGridAttr.selected = undefined
    globalGridAttr.gudingRen = []
  }
  emit('change', { val, type })
}
</script>
<template>
  <a-row align="middle">
    <a-col :span="8">操作人</a-col>
    <a-col :span="20">
      <a-radio-group
        v-model:value="globalGridAttr.user"
        @change="handleChange($event, 'user', 'input')"
      >
        <a-radio :value="1">全部</a-radio>
        <a-radio :value="2">固定人员</a-radio>
        <a-radio :value="3">节点实际操作</a-radio>
      </a-radio-group>
    </a-col>
  </a-row>
  <a-row align="middle" v-if="globalGridAttr.user === 2">
    <!-- <a-col :span="8">已选择</a-col> -->
    <a-col :span="20">
      <TreeSelect @change="handleChange($event, 'gudingRen', 'treeSelect')" />
    </a-col>
  </a-row>
  <a-row align="middle" v-else-if="globalGridAttr.user === 3">
    <!-- <a-col :span="8">已选择</a-col> -->
    <a-col :span="20">
      <a-select
        ref="select"
        placeholder="请选择"
        style="width: 100%"
        v-model:value="globalGridAttr.selected"
        :options="glNode"
        @change="handleChange($event, 'selected', 'select')"
      ></a-select>
    </a-col>
  </a-row>
  <a-row align="middle">
    <a-col :span="8">是否审批</a-col>
    <a-col :span="14">
      <a-switch
        v-model:checked="globalGridAttr.checkedSp"
        @change="handleChange($event, 'checkedSp', 'switch')"
      />
    </a-col>
  </a-row>
  <a-row align="middle">
    <a-col :span="8">结束方式</a-col>
    <a-col :span="14">
      <a-radio-group
        v-model:value="globalGridAttr.finished"
        @change="handleChange($event, 'finished', 'input')"
      >
        <a-radio :value="1">或签</a-radio>
        <a-radio :value="2">会签</a-radio>
      </a-radio-group>
    </a-col>
  </a-row>
  <template v-if="globalGridAttr.finished == 2">
    <a-row align="middle">
      <a-col :span="8">办理次序</a-col>
      <a-col :span="14">
        <a-radio-group
          v-model:value="globalGridAttr.blSort"
          @change="handleChange($event, 'blSort', 'input')"
        >
          <a-radio :value="1">并行办理</a-radio>
          <a-radio :value="2">串行办理</a-radio>
        </a-radio-group>
      </a-col>
    </a-row>
    <a-row align="middle" v-if="globalGridAttr.blSort === 2">
      <a-col :span="8">排序规则</a-col>
      <a-col :span="14">
        <a-select
          ref="select"
          placeholder="请选择"
          style="width: 100%"
          v-model:value="globalGridAttr.sortRule"
          :options="ruleList"
          @change="handleChange($event, 'sortRule', 'select')"
        ></a-select>
      </a-col>
      <a-col :span="24">
        <a-table :columns="columns" :data-source="data">
          <template #bodyCell="{ column, text }">
            <template v-if="column.dataIndex === 'name'">
              <a>{{ text }}</a>
            </template>
          </template>
        </a-table>
      </a-col>
    </a-row>
  </template>
</template>

<style lang="less" scoped></style>
